<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="moment.js"></script>
	<title></title>
	<style type="text/css">
		#square{
			position: relative;
			display: inline-block;
		}
		.two{
			display: inline-block;
			height: 82px;
			width: 82px;
			border: 1px solid #333;
			position: absolute;
			top:0px;
		}
		.one{
			display: inline-block;
			height: 40px;
			width: 40px;
			border: 1px solid #333;
			position: absolute;
			top:0px;
			left: 82px;
		}
		.ones{
			display: inline-block;
			height: 40px;
			width: 40px;
			border: 1px solid #333;
			position: absolute;
			top:41px;
			left: 82px;
		}
		.three{
			display: inline-block;
			border: 1px solid #333;
			height: 120px;
			width: 121px;
		}
		.five{
			display: inline-block;
			border: 1px solid #333;
			height: 202px;
			width: 202px;
		}
	</style>
</head>
<body>
	<span id="square">
		<span class="two" id="2"></span><span class="one" id="1"></span><span id="1" class="ones"></span><span id="3" class="three"></span><span id="5" class="five"></span>
	</span>
	<input type="text" id="data">
	<button>click</button>
</body>
</html>
<script type="text/javascript">
	function color(val,col){
				$("#"+val).css("backgroundColor",col)
			}
	function calor(val,col){
				$(val).css("backgroundColor",col)
		}
	var rgbToHex = function(rgb) {
		if (rgb.substring(0, 3) == 'rgb') {
		var color = rgb.toString().match(/\d+/g); 
		var hex = "#";
		for (var i = 0; i < 3; i++) {
			hex += ("0" + Number(color[i]).toString(16)).slice(-2);
		}
		return hex;
		}else{
			return rgb
		}
	}
	function cat(val){
		rgbToHex($(val).css("backgroundColor"))
	}
	$("button").click(function(){
		calor("span","#fff")//初始全局颜色

		var data = $("#data").val()
		var hours = moment.duration(data).hours()
		var minutes = moment.duration(data).minutes()/5
		var variable = "#ffffff"
		var green = "#008000"
		var nubll = [1,1,2,3,5];
		var _max =  Math.max.apply(null,nubll)
		//小时点数

	if( hours < 13 ){
		if(hours > 0){
			if(hours%2 == 0){//偶数时间点

			   two = hours/2
			   for (var i = 0; i < nubll.length; i++) {
			   		if(two < nubll[i]){ 
				   		var max = nubll[i]
				   		var	Transfer = hours - max
							color(max,"red")
				   			for (var i = 0; i < nubll.length; i++) {
			   					if(Transfer == nubll[i]){
			   						color(Transfer,"red")
				   				}
				   			}
			   		}else if(two > _max){
			   			//12点

			   			calor("span","red")
			   		}else if(two == _max){
			   		//10点

		   				color(_max,"red")
		   				calor(".three","red")
		   				calor(".two","red")
			   		}
			   }
			}else{
				//奇数时间点

				three = (hours-1)/2
				   for (var i = 0; i < nubll.length; i++) {
			   		if(three < nubll[i]){ 
				   		var max = nubll[i]
				   		var	Transfer = hours - max
							color(max,"red")
				   			for (var i = 0; i < nubll.length; i++) {
				   				if(Transfer == nubll[i]){
				   						color(Transfer,"red")
				   				}else if(Transfer == 4){
				   				//9点

				   					calor(".three","red")
			   						calor(".one","red")
				   				}
				   			}
			   		}else if(three == _max){
			   		//11点

			   			color(_max,"red")
			   			calor(".three","red")
			   			calor(".two","red")
			   			calor(".one","red")
			   		}
			   }
			}
		}
		//分钟点数

		if( minutes != 0 ){
		if(minutes%2 == 0){
		   two = minutes/2
		   for (var i = 0; i < nubll.length; i++) {
		   		if(two < nubll[i]){ 
			   		var max = nubll[i]
			   		var	Transfer = minutes - max
			   		if(rgbToHex($("#"+max).css("backgroundColor")) != variable ){
			   			color(max,"blue")
			   		}else{
			   			color(max,"green")
			   		}
			   			for (var i = 0; i < nubll.length; i++) {
		   					if(Transfer == nubll[i]){
		   						if(rgbToHex($("#"+Transfer).css("backgroundColor")) != variable && rgbToHex($("#"+Transfer).css("backgroundColor")) != green){
						   			color(Transfer,"blue")
						   		}else{
						   			color(Transfer,"green")
						   		}
			   				}
			   			}
		   		}else if(two == _max){
		   			if(rgbToHex($("#"+_max).css("backgroundColor")) != variable && rgbToHex($("#"+_max).css("backgroundColor")) != green){
							color(_max,"blue")
					}else{
							color(_max,"green")
					  }
					if(cat(".three") != variable && cat(".three")  != green){
							calor(".three","blue")
					}else{
							calor(".three","green")
						  }
					if(cat(".two") != variable && cat(".two") != green){
	   						calor(".two","blue")
					}else{
	   						calor(".two","green")
						  }
		   		}
		   }
		}else{
			three = (minutes-1)/2
			   for (var i = 0; i < nubll.length; i++) {
		   		if(three < nubll[i]){ 
			   		var max = nubll[i]
			   		var	Transfer = minutes - max
			   			if(rgbToHex($("#"+max).css("backgroundColor")) != variable ){
				   			color(max,"blue")
				   		}else{
				   			color(max,"green")
				   		}
			   			for (var i = 0; i < nubll.length; i++) {
			   				if(Transfer == nubll[i]){
			   					if(rgbToHex($("#"+Transfer).css("backgroundColor")) != variable && rgbToHex($("#"+Transfer).css("backgroundColor")) != green){
						   			color(Transfer,"blue")
						   		}else{
						   			color(Transfer,"green")
						   		}
			   				}else if(Transfer == 4){
			   					if(cat(".three")  != variable && cat(".three")  != green){
										calor(".three","blue")
								}else{
										calor(".three","green")
								  }
								  if(cat(".one") != variable && cat(".one") != green){
			   							calor(".one","blue")
								}else{
			   							calor(".one","green")
								}
			   				}
			   			}
		   		}else if(three == _max){
		   				if(rgbToHex($("#"+_max).css("backgroundColor")) != variable && rgbToHex($("#"+_max).css("backgroundColor")) != green ){
							color(_max,"blue")
						}else{
							color(_max,"green")
					 	}
					  	if(cat(".three")  != variable && cat(".three")  != green){
							calor(".three","blue")						
						}else{
							calor(".three","green")	   							
						}
						if(cat(".one")  != variable && cat(".one") != green){			
	   							calor(".one","blue")
						}else{							
	   							calor(".one","green")
						}
						if(cat(".two") != variable && cat(".two") != green){								
	   							calor(".two","blue")
						}else{
	   							calor(".two","green")
						}
		  	 		}
			    }
			}
		}
		}else if(hours > 12){
			alert("这是12小时制，不要输入超过12数字")
		}	
	})
</script>